import { useNavigate, useLocation, Outlet } from 'react-router-dom'
import { createContext, useEffect, useState } from 'react'

import NavItem from '../../components/navItem'
import Footer from '../../components/footer'

import './index.css'
import foldmenu from '../../assets/menu_fold.png'
import unfoldmenu from '../../assets/menu_unfold.png'

// 创建全局数据

export const Coxt = createContext({
    iffullwidth: false,
    iffoldmenu: false,
    caches: {},
    cachesFn: function () { }
})

export default function () {

    // data

    const [load, setload] = useState(0)
    const { pathname } = useLocation();
    const navigate = useNavigate();
    const [paths, setPath] = useState('')
    const [iffoldmenu, setIffoldmenu] = useState(true)
    const [iffullwidth, setiffullwidth] = useState(false)
    const [leftscroll, setleftscroll] = useState(true)
    const [linkstatus, setlinkstatus] = useState(-1)//-1为路由类型，赋值具体路由前缀就代表是戴航
    const [linkid, setlinkid] = useState(-1)//页面路由带的id记录

    /*caches*/

    const [caches, setcaches] = useState({})

    // methods

    let towhere = function (link) {
        iffullwidth ? menuifshow() : ''
        setlinkstatus(() => -1)
        navigate(link, { replace: true })
    }

    let subnavpagechange = function (link, id) {
        if (!id) {
            navigate(link)
            return;
        }
        setTimeout(() => {
            setlinkstatus(() => link)
            setlinkid(() => id)
        }, 200)
        navigate(link + '/' + id)
    }

    let menuifshow = function () {
        setIffoldmenu(() => !iffoldmenu)
    }

    let ifleftscroll = function (type) {
        if (type) {
            setleftscroll(() => true)
        } else {
            setleftscroll(() => false)
        }
    }

    let domresize = function () {
        var widths = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        if (widths < 800) {
            menuifshow()
            setiffullwidth(() => true)
        }
        window.addEventListener('resize', () => {
            widths = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
            if (widths < 800) {
                setiffullwidth(() => true)
            } else {
                setiffullwidth(() => false)
            }
        })
    }

    /*cachesFn*/

    let cachesFn = function (options, type) {
        if (!type) {
            return
        }
        var obj = caches
        obj[type] = options
        setcaches(() => obj)
    }

    // mounted / update

    useEffect(() => {
        if (load == 0) {
            setTimeout(() => {
                setload(() => 1)
            }, 200)
            domresize()
        }
    }, [])

    useEffect(() => {
        setlinkstatus(() => -1)
        setPath(() => pathname)
    }, [pathname])

    useEffect(() => {

    }, [iffullwidth])

    return (
        <Coxt.Provider value={{ iffullwidth, iffoldmenu, cachesFn, caches }} desc="引入createContext，调用它拿到一个对象比如Coxt，把他暴露出去，然后再拿Coxt的Provider属性作为组件使用，传入value={{要使用的对象属性}}，比如你初始定义的是age属性，那value={{age}}，这个传进去的age跟你初始属性应该保持一致性">
            <div className='top' desc='top-fixed'>
                <div className='logo'>L</div>
                <div className='menu' onClick={() => menuifshow()}>
                    {iffoldmenu ? <img src={unfoldmenu} width="100%" height="100%" alt="" /> : <img src={foldmenu} width="100%" height="100%" alt="" />}
                </div>
                <div desc="架构搭好之后填充的内容" className='rightinfos'>
                    <div className='nickname'>晚上好！xxxxxxxxxxxx</div>
                    <div className='head' onClick={() => subnavpagechange('/personal')}></div>
                </div>
                <div desc="架构搭好之后填充的内容" className='thesearchwrap'>
                    <div className='searchwrap'>
                        <div className='searchbutton' onClick={() => subnavpagechange('/searchrespage')}>搜索</div>
                        <div className='searchcont'>
                            <div className='searchcontin'>
                                <input type="text" placeholder='输入相关类型或名称' />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='left' desc="left-fixed" style={{
                left: iffoldmenu ? 0 : (iffullwidth ? '-100%' : 'calc(-100% + (100% - 280px))'),
                width: iffullwidth ? '100%' : 280, transition: load ? '200ms' : 0,
            }}>
                <div className='left' style={{
                    position: 'relative',
                    height: '100%',
                    width: !leftscroll ? '100vw' : (iffullwidth ? '100%' : '280px'),
                    overflow: 'hidden auto'
                }}>
                    <div style={{ paddingTop: 60 }}>
                        <NavItem name="首页" link="/index" nowpath={paths} linkevent={towhere}></NavItem>
                        <NavItem name="商品类型" link="/shoptype" nowpath={paths} ifleftscroll={ifleftscroll} iffullwidth={iffullwidth} subnavpagechange={subnavpagechange} linkstatus={linkstatus} linkid={linkid} menuifshow={menuifshow}></NavItem>
                        <NavItem name="服务类型" link="/servertype" nowpath={paths} ifleftscroll={ifleftscroll} iffullwidth={iffullwidth} subnavpagechange={subnavpagechange} linkstatus={linkstatus} linkid={linkid} menuifshow={menuifshow}></NavItem>
                        <NavItem name="反馈建议" link="/fallback" nowpath={paths} linkevent={towhere}></NavItem>
                    </div>
                </div>
            </div>
            <div className='cont' style={{ marginLeft: iffoldmenu ? 280 : 0, transition: load ? '200ms' : 0 }}>
                <div style={{ minHeight: 'calc(100vh - 60px)' }}>
                    <Outlet context={{ iffullwidths: iffullwidth }} />
                </div>
                <Footer />
            </div>
        </Coxt.Provider>
    )
}